<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body form-inline">

                    <label>
                        Name: 
                        <input type="text" v-model="name" class="form-control">
                    </label>

                    <input type="button" value="添加" @click="add" class="btn btn-primary">
              </div>
        </div>
        
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Oparation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateFormat('')}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>

    <script>
        // 如果我们通过全局配置了，请求的数据接口 根域名，则，在每次单独发起
        // http 请求的时候，请求的 url 路径，应该以相对路径开头，前边不能带斜线，
        // 否则不会启用根路径做拼接；
        Vue.http.options.root = 'http://localhost:8080/';

        // 全局启用emulateJSON选项
        Vue.http.options.emulateJSON = true;

        // 全局的过滤器，进行时间的格式化
        // 所谓的全局过滤器，就是所有的VM实例共享的
        Vue.filter('dateFormat', function(dateStr, pattern) {
            // 根据给定的时间字符串得到特定的时间
            var dt = new Date(dateStr);
            // yyyy-MM-dd
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1;
            var d = dt.getDate();
           
            if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                return y + '-' + m + '-' + d;
            } else {
                var hh = dt.getHours().toString().padStart(2, '0');
                var mm = dt.getMinutes().toString().padStart(2, '0');
                var ss = dt.getSeconds().toString().padStart(2, '0');
                return  y + '-' + m + '-' + d 
                    + " " + hh + ':' + mm + ":" + ss;
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                list: [  // 存放所有品牌列表的数组
                    // { id: 1, name: '五菱宏光', ctime: new Date() },
                    // { id: 2, name: '众泰', ctime: new Date() }
                ]
            },

            // 当vm实例的data和methods初始化完毕后，vm实例会自动执行created
            // 这个生命周期函数
            created() {
                this.getAllList();
            },
            
            // 当 vm 实例的 data 和 methods 初始化完毕，vm实例会自动执行created
            // 这个生命周期函数
            created() {
                this.getAllList();
            },

            methods: {
               
                getAllList() {  // 获取所有的品牌列表
                    // 分析
                    // 1.由于已经导入了Vue-resource这个包，所以可以直接通过
                    // this.$http来发起数据请求
                    // 2.根据接口API文档，知道获取列表的时候，应该发起一个get
                    // 请求
                    // 3.this.$http.get('url').then(function(result) {})
                    // 4.当通过then指定回调函数之后，在回调函数中，可以拿到数据
                    // 服务器返回的result
                    // 5.先判断result.code 是否等于0，如果等于0，就成功了，可以
                    // 把result.code 赋值给this.list,如果不等于0，可以弹窗提醒，
                    // 获取数据失败！

                    this.$http.get('webservice/car/getAll').then(result => {
                        // 注意通过$http获取到的数据都在result.body中放着
                        var result = result.body;
                        if (result.code === 0) {
                            // 成功了
                            this.list = result.data;
                            // alert('获取数据成功！');
                        } else {
                            // 失败了
                            alert('获取数据失败！');
                        }
                    })
                },

                // 添加品牌列表到后台服务器
                // 分析
                // 1.经过查看数据api接口，要发送一个post请求， this.$http.post
                // 2.this.$http.post{} 接受三个参数：
                //   2.1 第一个参数： 要请求的URL地址
                //   2.2 第二个参数： 要提交给服务器的数据， 要已对象的形式提交给服务器
                //       {name: this.name}
                //   2.3.第三个参数：是一个配置对象，要以那种表单数据类型提交过去，
                //       { emulateJSON：true }，以普通表单格式，将数据提交给服务器
                //       application/x-www-form-urlencoded
                // 3.在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，
                //   需要调用 result.body
                // add() {
                //     this.$http.post(
                //         'webservice/car/insert', 
                //         {name: this.name}, 
                //         {emulateJSON: true})
                //     .then(result => {
                //         if (result.body.code === 0) {
                //             // 成功了
                //             // 添加完成后只需要手动调用 getAllList 就能刷新品牌列表了
                //             this.getAllList();
                //             // 清空 name
                //             this.name = '';
                //         } else {
                //             // 失败了
                //             alert("添加失败");
                //         }
                //     })
                // }, 

                add() {
                    this.$http.post(
                        'webservice/car/insert', 
                        {name: this.name})
                    .then(result => {
                        if (result.body.code === 0) {
                            // 成功了
                            // 添加完成后只需要手动调用 getAllList 就能刷新品牌列表了
                            this.getAllList();
                            // 清空 name
                            this.name = '';
                        } else {
                            // 失败了
                            alert("添加失败");
                        }
                    })
                }, 

                // 删除品牌
                del(id) {
                    this.$http.get('webservice/car/deleteById?id=' + id).then(result => {
                        if (result.body.code === 0) {
                            // 删除成功
                            this.getAllList();
                        } else {
                            // 删除失败
                            alert("删除失败！");
                        }
                    })
                }
            }
        });
    </script>
</body>
</html>